<template>
  <!-- 商品组件 -->
  <div class="list-con" :class="{ normalList: listType == 1 }">
    <div
      class="item"
      v-for="item in paleList"
      :key="item.prodId"
      @click="toProdDetail(item.prodId, item.seckillId, item.groupActivityId)"
    >
      <!-- 团购（成团人数） -->
      <div class="group-number" v-if="item.groupNumber">
        {{ item.groupNumber }}{{$t('index.join')}}
      </div>
      <div class="goods-img">
        <!-- 秒杀/热销商品图 -->
        <img v-if="item.pic" :src="item.pic" alt />
        <!-- 团购商品图 -->
        <img v-if="item.prodPic" :src="item.prodPic" alt />
      </div>
      <div class="goods-msg">
        <div class="goods-name">{{ item.prodName }}</div>
        <div class="goods-price">
          <!-- 秒杀商品价格 -->
          <div class="price" v-if="item.seckillPrice">
            ￥
            <span class="big">{{ parsePrice(item.seckillPrice)[0] }}</span>
            <span class="small">.{{ parsePrice(item.seckillPrice)[1] }}</span>
          </div>
          <!-- 团购商品价格 -->
          <div class="price" v-if="item.actPrice">
            ￥
            <span class="big">{{ parsePrice(item.actPrice)[0] }}</span>
            <span class="small">.{{ parsePrice(item.actPrice)[1] }}</span>
          </div>
          <!-- 热销商品价格 -->
          <div class="price" v-if="!item.actPrice && !item.seckillPrice">
            ￥
            <span class="big">{{ parsePrice(item.price)[0] }}</span>
            <span class="small">.{{ parsePrice(item.price)[1] }}</span>
          </div>
          <!-- <div class="old-price" v-if="!item.brief">￥{{toPrice(item.price)}}</div> -->
        </div>
      </div>
    </div>
    <!-- 商品列表为空 -->
    <div class="empty" v-if="!paleList.length">
      <div class="img">
        <img src="~/assets/images/emptyPic/not-found.png" alt />
      </div>
      <div class="action">
        <div class="text">{{$t('sorryNoRelatedProducts')}}</div>
        <a href="/list" class="btn">{{$t('lookAtOther')}}</a>
      </div>
    </div>
    <!-- 商品列表为空 -->
  </div>
</template>

<script>
export default {
  props: {
    paleList: {
      type: Array, //指定传入的类型
      default: () => []//这样可以指定默认的值
    },
    listType: {
      type: Number,
      default: 0
    }
  },
  methods: {
    /**
     * 处理价格样式
     */
    toPrice (val) {
      if (!val) {
        var val = Number(val)
        val = 0;
      }
      // 截取小数点后两位，没有则自动补0
      return (val.toFixed(2))
    },
    parsePrice (val) {
      var val = Number(val)
      if (!val) {
        val = 0;
      }
      // 截取小数点后两位，并以小数点为切割点将val转化为数组  
      return val.toFixed(2).split(".");
    },

    /**
     * 跳转到商品详情页
     */
    toProdDetail (prodId, seckillId, groupActivityId) {
      
      if (seckillId) {
        // const newPage = this.$router.resolve({name: 'secdetail-seckillId', params: { seckillId: seckillId, prodId: prodId }})
        // window.open(newPage.href,'_blank')
        this.$router.push({ name: 'secdetail-seckillId', params: { seckillId: seckillId, prodId: prodId } })
      } else if (groupActivityId) {
        // const newPage = this.$router.resolve({ name: 'detail-prodId', params: { prodId: prodId, groupActivityId: groupActivityId } })
        // window.open(newPage.href, '_blank')
        this.$router.push({ name: 'detail-prodId', params: { prodId: prodId, groupActivityId: groupActivityId } })
      } else {
        // const newPage = this.$router.resolve({ path: '/detail/' + prodId })
        // window.open(newPage.href, '_blank')
        this.$router.push({ path: '/detail/' + prodId })
      }
    },
    goIndex () {
      this.$router.push({ path: '/' })
    }
  }
}
</script>

<style scoped>
.normalList {
  min-height: 440px;
}

.normalList .item {
  width: 275px;
}

.normalList .item .goods-img {
  width: 275px;
  height: 275px;
  line-height: 275px;
}

.normalList .empty {
  min-height: 380px;
}

/* 商品名字的样式修改 */
.goods-list .list-con .item .goods-msg .goods-name {
  height: 20px;
  line-height: 14px;
  font-size: 14px;
  max-width: 100%;
  /* display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
    overflow: hidden */
}
</style>
